<template>

    <el-table :data="data" stripe v-loading="loading">
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="id" label="id" width="180"></el-table-column>
        <el-table-column prop="name" label="角色名称" width="180"></el-table-column>
        <el-table-column prop="id" label="操作">
            <template #default="scope">

                <!-- <el-button size="small" type="primary">删除 </el-button>
                <el-button>修改</el-button>
                <el-button type="danger">修改</el-button>
                <el-button type="warning" circle>修改</el-button>
                <el-button link type="warning" circle>修改</el-button> -->

                <el-button link size="small" :icon="'Edit'" type="primary" @click="toEdit(scope)">编辑</el-button>
                <el-button link size="small" :icon="'IceTea'" type="primary"
                    @click="toDelete(scope.row.id)">删除</el-button>

            </template> </el-table-column>
    </el-table>

    <el-pagination @current-change="currentChange" layout="prev, pager, next" v-model:current-page="currentPage"
        :total="1000" :page-size="50" />

    <div>
        start
        <el-row>
            <el-col :span="24">
                <div class="grid-content ep-bg-purple-dark">sadfsafdsaf</div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <div class="grid-content ep-bg-purple">1</div>
            </el-col>
            <el-col :span="12">
                <div class="grid-content ep-bg-purple">1</div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="8">
                <div class="grid-content ep-bg-purple">1</div>
            </el-col>
            <el-col :span="8">
                <div class="grid-content ep-bg-purple">1</div>
            </el-col>
            <el-col :span="8">
                <div class="grid-content ep-bg-purple">1</div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="6">
                <div class="grid-content ep-bg-purple">1</div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content ep-bg-purple">1</div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content ep-bg-purple">1</div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content ep-bg-purple">1</div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="4">
                <div class="grid-content ep-bg-purple" />
            </el-col>
            <el-col :span="4">
                <div class="grid-content ep-bg-purple-light" />
            </el-col>
            <el-col :span="4">
                <div class="grid-content ep-bg-purple" />
            </el-col>
            <el-col :span="4">
                <div class="grid-content ep-bg-purple-light" />
            </el-col>
            <el-col :span="4">
                <div class="grid-content ep-bg-purple" />
            </el-col>
            <el-col :span="4">
                <div class="grid-content ep-bg-purple-light" />
            </el-col>
        </el-row>
        end


    </div>


    <el-dialog title="编辑" v-model="dialogVisiable" :close-on-click-modal="false">
        <el-form :model="form" label-width="auto" style="max-width: 600px">
            <el-form-item label="Activity id">
                <el-input v-model="form.id" readonly />
            </el-form-item>
            <el-form-item label="Activity name">
                <el-input v-model="form.name" />
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="saveOrUpdate">保存</el-button>
                <el-button @click=" dialogVisiable = false;">Cancel</el-button>
            </el-form-item>
        </el-form>


    </el-dialog>



</template>

<script setup lang="ts" name='index'>
import { ref, reactive } from "vue";
import { ElMessage, ElMessageBox } from 'element-plus'

const dialogVisiable = ref(false);
const currentPage = ref(5);
const loading = ref(false);



const form = reactive({
    id: '',
    name: ''
})




interface Role {
    id: string;
    name: string;
}



let data = ref<Role[]>([])


//分页的页号改变的事件
function currentChange() {
    console.log('currentPage', currentPage.value);
    //查询 当前页号的时间
    getData()

}



//删除
function toDelete(id: string | number) {
    //Promise对象 ajax 
    ElMessageBox({
        title: '提示',
        type: "warning",
        message: '是否删除',
        showCancelButton: true,
        cancelButtonText: '取消',
        confirmButtonText: '确定',
    }).then(() => {
        // alert("删除成功: " + id)
        ElMessage({
            message: '删除成功' + id,
            type: 'success',
        })
    })

}

function toEdit(scope: any) {
    dialogVisiable.value = true;
    let { id } = scope.row;
    //根据  id 获取当前行的数据
    let role = { id: '1', name: '张三' }
    form.id = role.id
    form.name = role.name
}

// 保存或更新 获取表单数据 提交到  后台的接口  java servelt
function saveOrUpdate() {
    console.log(form);
    dialogVisiable.value = false;

}
function getData() {
    loading.value = true;
    // 模拟数据
    data.value = []


    setTimeout(function () {
        data.value = [
            { id: '1', name: '张三' },
            { id: '2', name: '李四' },
            { id: '3', name: '王五' },
        ]
        loading.value = false;
    }, 4000)


}

//查询数据
getData()

</script>






<style scoped>
.grid-content {
    background-color: rgb(114, 112, 112);
    margin: 3px;
}
</style>
